@charset "UTF-8";

// 通用手机屏幕
$phone: 47em;

// iphone4
$iphone4-w: 320px;
$iphone4-h: 480px;

// iphone5
$iphone5-w: 320px;
$iphone5-h: 568px;

// iphone6
$iphone6-w: 375px;
$iphone6-h: 667px;

// plus
$plus-w: 414px;
$plus-h: 736px;

// ipad  =  768~1360px
$ipad-min: 47.063em;
$ipad-max: 85em;

// 笔记本 = 1360~1600px
$s-pc-min: 85.063em;
$s-pc-max: 100em;

// 笔记本~1080p显示器 = 1600~1920px
$l-pc-min: 100.063em;
$l-pc-max: 120em;

// 高分屏显示器  >  1920px
$xl-pc: 120.063em;


@mixin zsy($devices){
	@if $devices == phone{
        @media only screen and (max-width: $phone){
            @content;
        }
    }
    @else if $devices == iphone4{
        @media only screen and (device-width: $iphone4-w) and (device-height: $iphone4-h) and (-webkit-min-device-pixel-ratio: 2){
            @content;
        }
    }
    @else if $devices == iphone5{
        @media only screen and (device-width: $iphone5-w) and (device-height: $iphone5-h) and (-webkit-min-device-pixel-ratio: 2){
            @content;
        }
    }
    @else if $devices == iphone6{
        @media only screen and (device-width: $iphone6-w) and (device-height: $iphone6-h) and (-webkit-min-device-pixel-ratio: 2){
            @content;
        }
    }
    @else if $devices == plus{
        @media only screen and (device-width: $plus-w) and (device-height: $plus-h) and (-webkit-min-device-pixel-ratio: 2){
            @content;
        }
    }
    @else if $devices == ipad{
        @media only screen and (min-width: $ipad-min) and (max-width: $ipad-max){
            @content;
        }
    }
    @else if $devices == s-pc{
        @media only screen and (min-width: $s-pc-min) and (max-width: $s-pc-max){
            @content;
        }
    }
    @else if $devices == l-pc{
        @media only screen and (min-width: $l-pc-min) and (max-width: $l-pc-max){
            @content;
        }
    }
    @else if $devices == xl-pc{
        @media only screen and (min-width: $xl-pc){
            @content;
        }
    }
}

// 以下为演示代码

.box{
	@include zsy(phone){
		&:after{
			content: '手机';
		}
	}
	@include zsy(iphone4){
		&:after{
			content: 'iphone4';
		}
	}
	@include zsy(iphone5){
		&:after{
			content: 'iphone5';
		}
	}
	@include zsy(iphone6){
		&:after{
			content: 'iphone6';
		}
	}
	@include zsy(plus){
		&:after{
			content: 'plus';
		}
	}
	@include zsy(ipad){
		&:after{
			content: 'ipad';
		}
	}
	@include zsy(s-pc){
		&:after{
			content: '笔记本';
		}
	}
	@include zsy(l-pc){
		&:after{
			content: '1080P显示器';
		}
	}
	@include zsy(xl-pc){
		&:after{
			content: '大于1080P显示器';
		}
	}
}